#message_box1{
    background-image:linear-gradient(to top,#06A9E3,#3D78D6);
    .message_box1_content{
        height: 20vw;
        width: 90%;
        margin: 0px auto;
        color: white;
        .mb1c_box1{
            height: 10vw;
            margin-top: 9vw;
            span{
                font-size: 6vw;
            }
        }
        .mb1c_box2{
            font-size: 4vw;
            height: 10vw;
            line-height: 10vw;
            margin-top: 9vw;
        }
        .mb1c_box3{
            height: 10vw;
            margin-top: 9vw;
            span{
                font-size: 6vw;
            }
        }
    }
}
#message_box2{
    height: auto;
    margin-bottom: 15vw;
    .message_box2_content{
        width: 90%;
        margin: 0px auto;
        .mb2c_time{
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .mb2c_left{
            display: flex;
            height: auto;
            padding-top: 5px;
            padding-bottom: 15px;
            .mb2c_left_box1{
                width: 15vw;
                img{
                    height:10vw;
                    width: 10vw;
                    border-radius:50%;
                }
            }
            .mb2c_left_box2{
                width: 60vw;
                background-color: #E1EEFD;
                padding-top: 10px;
                padding-bottom: 10px;
                border-top-right-radius: 15px;
                border-bottom-left-radius: 15px;
                p{
                    width: 90%;
                    margin: 0px auto;
                    word-wrap: break-word;
                    word-break: break-all;
                    font-size: 2vw;
                }
            }
        }
        .mb2c_right{
            display: flex;
            height: auto;
            justify-content: flex-end;
            color: white;
            padding-top: 5px;
            padding-bottom: 15px;
            .mb2c_right_box1{
                width: 60vw;
                background-image: linear-gradient(to top,#679DF0,#38C9FD);
                padding-top: 10px;
                padding-bottom: 10px;
                border-top-left-radius: 15px;
                border-bottom-right-radius: 15px;
                p{
                    width: 90%;
                    margin: 0px auto;
                    word-wrap: break-word;
                    word-break: break-all;
                    font-size: 2vw;
                }
            }
            .mb2c_right_box2{
                width: 15vw;
                img{
                    height:10vw;
                    width: 10vw;
                    border-radius:50%;
                }
            }
        }
    }
}
#message_box3{
    position: fixed;
    background-color: #E6E6E6;
    height: 15vw;
    bottom: 0px;
    width: 100%;
    display: flex;
    .mb3_box1{
        width: 80%;
        div{
            height: 15svw;
            line-height: 15vw;
            width: 95%;
            margin: 0px auto;
            textarea{
                width: 100%;
                height: 9vw;
                border-radius: 10px;
                border: none;
                font-size: 25px;
                word-wrap: break-word;
                word-break: break-all;
                margin-top: -10px;
                overflow-y: hidden;
                vertical-align: middle;
            }
        }
    }
    .mb3_box2{
        width: 10%;
        height: 15vw;
        line-height: 15vw;
        display: block;
        span{
            font-size: 20px;
        }
    }
    .mb3_box3{
        width: 8%;
        height: 15vw;
        line-height: 15vw;
        display: block;
        span{
            font-size: 20px;
        }
    }
    .mb3_box4{
        width: 18%;
        height: 15vw;
        display: none;
        div{
            height:9vw;
            line-height: 9vw;
            border-radius: 10px;
            margin-top: 3vw;
            font-size: 16px;
        }
    }
}